import React from "react";
import styles from "../css/register.module.css";
import styles2 from '../css/my.module.css'
import ProgressView from "../view/ProgressView";
import PressTouch from "../view/PressTouch";
import { locationTo } from "../utils/LocationUtil";
import * as locations from "../const/locations";
import { checkPhone } from "../utils/RegUtil";
import BaseScreen from "./BaseScreen";
import Config from "../Config";
import { LOGIN_IMG } from "../const/imgs";
import { MyButton,MyButtonYz } from "../view/MyButton";
import InputView from "../view/inputView2";
import LoginHeader from "../view/loginHeader";

class ForgotPwdScreen extends BaseScreen {
  handleInput = (type, event) => {
    let value = event.target.value;
    switch (type) {
      case "phone":
        this.setState({ phone: value });
        break;
      case "password":
        this.setState({ password: value });
        break;
      case "password2":
        this.setState({ password2: value });
        break;
      case "yzm":
        this.setState({ yzm: value });
        break;
      default:
    }
  };

  constructor(props) {
    super(props);
    this.state = {
      ...this.getDefaultState(),
      phone: "",
      password: "",
      password2: "",
      yzm: "",
      getYzm: "获取验证码",
      check: false,
      loading: false,
      bgColor:Config.BaseColor
    };
  }

  componentWillMount() {
  }

  componentWillUnmount() {
    document.title = "忘记密码";

    clearInterval(this.tt);
  }

  isVerify() {
    return false;
  }
  getPhone=(e)=>{   
    this.setState({
      phone:e,
    })
    
  }
  check(phone, yzm, password, password2) {
    if (!phone) {
      this.showMsgDialog("手机号不能为空");
    } else if (!checkPhone(phone)) {
      this.showMsgDialog("请输入正确的手机号");
    } else if (!yzm) {
      this.showMsgDialog("验证码不能为空");
    } else if (!password) {
      this.showMsgDialog("密码不能为空");
    } else if (password.length < 6) {
      this.showMsgDialog("密码长度不能小于6位");
    } else if (password !== password2) {
      this.showMsgDialog("密码不一致");
    } else {
      this.onRegister(phone, password, yzm);
    }
  }

  //  timer 
  tt;

  time() {
    let i = 120;
    this.tt = setInterval(() => {
      this.setState({
        getYzm: i + "s"
      });
      i--;
      if (i < 0) {
        clearInterval(this.tt);
        this.setState({
          getYzm: "重新获取"
        });
      }
    }, 1000);
  }

  getCode(phone) {
    let params = {
      phone: phone,
      type: "forget"
    };
    // this.setState({ loading: true });
    this.time();

    // service
    //   .netGetSms(params)
    //   .then(res => {
    //     this.setState({ loading: false });
    //     this.showMsgDialog(res);
    //   })
    //   .catch(err => {
    //     this.setState({
    //       warn: err.message,
    //       loading: false
    //     });
    //   });
  }

  onRegister = (phone, password, yzm) => {
    let params = {
      weichat_id: Config.SysFlag,
      phone: phone,
      password: password,
      ident: "",
      check: 1,
      code: yzm
    };
    this.setState({ loading: true });
    // service
    //   .forgotPassword(params)
    //   .then(res => {
    //     locationTo(locations.LOGIN);
    //     this.setState({ loading: false });
    //   })
    //   .catch(err => {
    //     this.setState({
    //       warn: err.message,
    //       loading: false
    //     });
    //   });
  };

  dealGetCode() {
    const phone = this.state.phone
    if (!phone || !checkPhone(phone)) {
      this.showMsgDialog("请输入正确的手机号");

    } else {
      this.getCode(phone);
    }
  }

  render() {
    const { yzm, getYzm, loading } = this.state;
    return (
      <div className={styles2[`homes`]} style={{ paddingTop: '10px' }}>
        <div className={styles2[`wrapper`]}
          style={{ paddingTop: '1px' }}
        >
          <div className={styles["info-content"]}>
            <div>
              <div style={{ fontSize: "14px", lineHeight: "28px" }}>手机号</div>
              <div className={styles["yzm-content"]}>
                <InputView
                  ref="account"
                  className={styles["phoneNumber-content"]}
                  img={LOGIN_IMG.DEL}
                  placeholder="请输入手机号"
                  label="手机号"
                  value={this.state.phone}
                  isClear={true}
                  color={FontColor}
                  onValueChange={this.getPhone}
                  maxlength={11}
                />
              </div>
            </div>
            <div>
              <div style={{ fontSize: "14px", lineHeight: "28px" }}>验证码</div>
              <div className={styles["yzm-content"]}>
                <input
                  type="text"
                  placeholder="请输入验证码"
                  value={yzm}
                  onChange={e => {
                    this.handleInput("yzm", e);
                  }}
                />
                <button
                 onClick={() => {
                  this.dealGetCode();
                }}
                className={styles['yzm_btn']}
                disabled={!(getYzm === "获取验证码" || getYzm === "重新获取")||this.state.phone.length===0}                  
                >
                  {getYzm}
                </button>
              </div>
            </div>
            <div>
              <div style={{ fontSize: "14px", lineHeight: "28px" }}>新密码</div>
              <div className={styles["yzm-content"]}>
                <InputView
                  className={styles["pwd-content"]}
                  ref="password"
                  type="password"
                  label="密码"
                  placeholder="请输入您的密码，长度不小于6位"
                  isClear={false}
                  maxlength={50}
                />
              </div>
            </div>
            <div>
              <div style={{ fontSize: "14px", lineHeight: "28px" }}>确认密码</div>
              <div className={styles["yzm-content"]}>
                <InputView
                  className={styles["pwd-content"]}
                  ref="password2"
                  type="password"
                  label="再次输入密码"
                  placeholder="请再次输入您的密码"
                  isClear={false}
                  maxlength={50}
                />
              </div>
            </div>
          </div>
        </div>
        <div style={{ padding: '0 4%' }}>

          <MyButton
            onClick={() => {
              this.check(
                this.refs.account.state.value,
                this.state.yzm,
                this.refs.password.state.value,
                this.refs.password2.state.value
              );
            }}
            name={"重置密码"}
            style={style}
          />
          <section className={styles["ps"]} style={FontColor}>
            <span
              onClick={() => {
                locationTo(locations.LOGIN, "");
              }}
            >
              返回登录
          </span>
          </section>
          <div className={styles["loading"]}>
            {this.renderMsgDialog()}
            <ProgressView visibility={loading} mode={ProgressView.MODE_MEDIUM} />
          </div>
        </div>
      </div>
    );
  }
}
const style = {
  marginTop: "4.125rem",
  height: "20px",
  lineHeight: "20px",
  borderRadius: '0.3rem'
};
const styleYzm = {
  borderRadius: '0.3rem',
  lineHeight: "20px",
  height: "20px",
  width:'96px', borderRadius:'0.3rem', 
  padding: '0.3rem',
}

// const registerStyle = { background: `url("${Config.loginBgAdress}") repeat-x`, backgroundSize: '100% 50rem' };
const iconStyle = {
  // background: `url("${Config.iconAdress}") no-repeat`,
  backgroundSize: "100% 100%"
};
const FontColor = { color: `${Config.BaseColor}` };

export default ForgotPwdScreen;
